<script setup>
import { ref } from 'vue'
import SvgIcon from '../../../components/SvgIcon.vue'
import { useStore } from 'vuex'
const store = useStore()
//点击切换index
const changeIndex = (item,index) => {

  store.commit('category/setCurrentCategoryId', item.id)
  store.commit('category/setCurrentIndex', index)
}
//切换nav展示更多
const fold = ref('unfold')
const ulRef = ref(null)
const changeFold = () => {
  if (fold.value === 'unfold') {
    fold.value = 'fold'
    ulRef.value.classList.remove('h-12')
  } else {
    fold.value = 'unfold'

    ulRef.value.classList.add('h-12')
  }
}
</script>
<template>
  <ul
    class="flex relative duration-500 text-slate-700 text-2xl font-bold w-2/3 mx-auto overflow-hidden flex-wrap h-12 pr-1 dark:bg-slate-800"
    ref="ulRef"
  >
    <!-- 使用 v-for 循环渲染 li 元素，并为每个 li 元素绑定唯一的 ref -->
    <li
      class="shrink-0 p-2 z-10 rounded-lg cursor-pointer"
      v-for="(item, index) in $store.getters.categorys"
      :key="index"
      @click="changeIndex(item,index)"
      :class="{ 'bg-zinc-200': $store.getters.currentIndex === index }"
    >
      {{ item.name }}
    </li>

    <!-- 展示更多 -->
    <li
      @click="changeFold"
      class="absolute right-0 top-1/2 -translate-y-1/2 p-2 hover:bg-zinc-400"
    >
      <SvgIcon :name="fold" class="w-4 h-4" />
    </li>
  </ul>
</template>
